class Cart {
    constructor() {
        // 获取元素
        this.cartTable = document.querySelector('.cartTable')
        this.tbody = document.querySelector('tbody')
        this.selectAll = document.querySelector('.selectAll')
        this.totalNum = document.querySelector('.totalNum')
        this.money = document.querySelector('.money')
        this.calc = document.querySelector('.calc')
        // 从localStorage里面取出数据
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        // 初始化
        this.init()
    }
    init() {
        this.render()
        this.addEvent()
        this.click()
    }
    click(){
        this.calc.onclick = ()=>{
            location.href = '../小兔鲜项目素材/8-settlement.html'
        }
    }
    // 渲染数据
    render() {
        if (!this.list.length) {
            // 如果购物车没有数据，就给个提示，并跳转到商品首页
            this.tbody.innerHTML = `
                <tr height="100">
                    <td colspan="6">
                        <h1>
                            购物车是空的，赶紧去购物！
                            <a href="../html/1-index.html">GO</a> 
                        </h1>
                    </td>
                </tr>
            `
        } else {
            // 有数据
            // 遍历数据,然后赋值
            // 先清空之前的数据，然后再渲染页面
            this.tbody.innerHTML = ''
            this.list.forEach((item) => {
                this.tbody.innerHTML += `
                    <tr>
                        <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && 'checked'}/></td>
                        <td>
                            <img src="${item.img_small_logo}" >
                            <span class="hide">${item.title}</span>
                        </td>
                        <td><span>${item.price}</span></td>
                        <td>
                            <span class="sub" data-id="${item.goods_id}">-</span>
                            <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
                            <span class="add" data-id="${item.goods_id}">+</span>
                        </td>
                        <td><span class="price">${item.price * item.cart_number}元</span></td>
                        <td><span class="del" data-id="${item.goods_id}">删除</span></td>
                    </tr>
                `
            });
        }
        // 数据可持续化
        localStorage.setItem('cart', JSON.stringify(this.list))
        this.count()
    }

    // 注意点：接下来购物车业务逻辑都是先改变数据，再让数据驱动页面(数据改变了，重新渲染下，页面就跟着变了)
    // 事件委派
    addEvent() {
        this.cartTable.onclick = (e) => {
            let target = e.target || e.srcElement
            // 做全选功能
            if (target.className == 'selectAll') {
                // alert(1)
                // 获取自己的状态
                let type = target.checked
                this.list.forEach(item => {
                    item.is_select = type
                })
                // 重新渲染数据
                this.render()
            }
            // 单选功能
            if (target.className == 'select') {
                // 获取所对应的id
                let id = target.dataset.id - 0
                // 获取所对应的id所对应的商品
                let goods = this.list.find((item) => { return item.goods_id == id })
                goods.is_select = !goods.is_select
                // every()遍历，所有的满足要求才行，所有的单选框状态为true，全选框状态为true，反之为false
                let res = this.list.every(item => { return item.is_select == true })
                if (res) {
                    this.selectAll.checked = true
                } else {
                    this.selectAll.checked = false
                }
                // 重新渲染数据
                this.render()
            }

            // 商品数量增加
            if (target.className == 'add') {
                // 获取所对应的id
                let id = target.dataset.id - 0
                // 获取所对应的id所对应的商品
                let goods = this.list.find((item) => { return item.goods_id == id })
                // 注意点：这里应该判断的是库存的数量，但是这里是测试，所以写的固定的
                if (goods.cart_number == 10) {
                    alert('亲，最多只能购买10件')
                    return false
                }
                goods.cart_number++
                // 重新渲染数据
                this.render()
            }

            // 商品数量减少
            if (target.className == 'sub') {
                // 获取所对应的id
                let id = target.dataset.id - 0
                // 获取所对应的id所对应的商品
                let goods = this.list.find((item) => { return item.goods_id == id })
                if (goods.cart_number == 1) {
                    return false
                }
                goods.cart_number--
                // 重新渲染数据
                this.render()
            }

            // 删除功能
            if (target.className == 'del') {
                // 获取所对应的id
                let id = target.dataset.id - 0
                // 获取所对应的id所对应的商品
                let index = this.list.find((item) => { return item.goods_id == id })
                // splice()方法
                this.list.splice(index, 1)
                // 如果数组的长度为0，就把全选的状态改为false
                if (!this.list.length) {
                    this.selectAll.checked = false
                }
                // 重新渲染数据
                this.render()
            }

            // 删除功能，选中几个删除几个
            if (target.className == 'dlAll') {
                // 使用filter()方法过滤，要留下没有选中的
                // 注意点：过滤出来的就是没有选中的
                let res = this.list.filter(item => { return item.is_select == false })
                // 把没有选中的赋值给了数组，就把选中的覆盖了(删除)
                this.list = res

                // 如果数组的长度为0，就把全选的状态改为false
                if (!this.list.length) {
                    this.selectAll.checked = false
                }
                // 重新渲染数据
                this.render()
            }
        }
    }

    // 价格和商品数量
    count(){
        let num = 0
        let price = 0
        this.list.forEach((item)=>{
            if(item.is_select == true){
                num += item.cart_number
                price += item.price * item.cart_number
            }
            // 刷新页面的时候，保存单选框的状态
            let res = this.list.every(item => { return item.is_select == true })
            if (res) {
                this.selectAll.checked = true
            } else {
                this.selectAll.checked = false
            }
        })
        this.totalNum.innerHTML = num
        this.money.innerHTML = price.toFixed(2)
    }
}
new Cart()